<template>
  <AppSearchBar path="/memoEdit"></AppSearchBar>
  <div class="meno-wrapper" v-if="menoListReadonly && menoListReadonly.length">
    <SwipeAction v-for="item in menoListReadonly" :ket="item.id" :show-edit="false" @delete="del(item)">
      <MobileCard
        :source="item"
        parent-com="meno"
        @click="edit(item)"
        class="meno-card"
      >
        <template v-slot="{ row }">
          <div class="meno-cont">
            <h5>{{ row.name }}</h5>
            <var-ellipsis :line-clamp="4" :tooltip="false" class="text">
              {{
                row.describe ||''
              }}
            </var-ellipsis>
            <div class="creat-time">
              <span>{{ row.createTime }}</span>
            </div>
          </div>
        </template>
      </MobileCard>
    </SwipeAction>
  </div>
  <my-empty v-else description="暂无数据！"/>
</template>
<script setup name="MemoIndex">
import AppSearchBar from './../../components/AppSearchBar/index.vue'
import { inject, ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import useSymbols from '../../compostions/useSymbols.js';
import MobileCard from '../../components/MobileCard/index.vue';
import SwipeAction from '../../components/SwipeAction/index.vue';
import { TYPE_NAME_BIAN_QIAN } from '../../util/constant';

const { menoListReadonly, getMenoDataList, setVisitItem , deleteMenoDataItem} = inject(useSymbols);

const router = useRouter();

const showDeleteRef = ref(false);

onMounted(() => {
  getMenoDataList();
});

// 打开窗口
const edit = ({ id }) => {
  setVisitItem(id, TYPE_NAME_BIAN_QIAN); // 统计方法
  router.push({path:'/memoEdit',query:{id}})
};

const del=({id}) => {
  deleteMenoDataItem(id);
}

</script>
<style scoped lang="less">
.meno-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 0.5rem;
  box-sizing: border-box;
  padding: 0.5rem;
  .meno-card {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    border-radius: 0;
    transition: 0.2s;
    background-color: #fff;
    .meno-cont {
      width: 100%;
      padding: 0 0.5rem;
      box-sizing: border-box;
      background-color: #fff;
      h5 {
        width: 11rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 1rem;
        line-height: 1.2rem;
        font-weight: 500;
        margin: 0;
        padding: 0.8rem 0;
        color: #444;
      }

      .text {
        height: 4.2rem;
        width: 100%;
        font-size: 0.82rem;
        line-height: 0.95rem;
        color: #888;
        display: block;
        word-break: break-all;
      }

      .creat-time {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        span {
          color: #ababab;
          font-size: 0.8rem;
        }
      }
    }
  }
}
</style>../../util/constant.js
